---
import '~/styles/global.css'
import '~/styles/markdown.css'
import '~/styles/lqip.css'
import { SITE } from '~/config'
import Head from '~/components/base/Head.astro'
import Header from './Header.astro'
import Footer from './Footer.astro'

type Props = {
  title: string
  description: string
  image?: string
}

const { title, description, image }: Props = Astro.props
---

<!doctype html>
<html lang={SITE.lang} transition:name="root" transition:animate={SITE.transition ? 'fade' : 'none'}>
  <head>
    <Head title={`${title} | ${SITE.title}`} {description} {image} />
  </head>
  <body class="flex flex-col">
    <Header />
    <div class="grow flex">
      <main class="relative border-x border-border/50 global-layout-width mx-auto grow min-w-0">
        <slot />
      </main>
    </div>
    <Footer />
  </body>
</html>
